<!--
 * Copyright TLR Team, Inc. All Rights Reserved.
 /* global device */
-->
<ng-include src="'app/mvp/template/view/form/rename.html'"></ng-include>
<ng-include src="'app/mvp/template/view/form/wifi.html'"></ng-include>
<ng-include src="'app/mvp/template/view/form/msg.html'"></ng-include>
<div class="purifier-bg">
    <div class="container-fluid">
        <!-- /.row -->
        <div class="row">
            <div class="device-item-title item-font title-bg">
                <div class="device-title-txt">空气净化器</div>
                <div class="right-triangle"></div>
                <div style="float:right;" class="device-title-txt"><a href="#/air-purifier-bind">绑定</a></div>
            </div>
        </div>
        <div clas="row" ng-if="!airDevices">
            <div class="loading">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="row" ng-if="airDevices.length === 0">
            <div class="col-sm-12 device-item-container">
                <div class="device-item background">
                    <div class="device-item-txt" style="padding-top:20px;text-align:center;">
                        无绑定设备
                    </div>
                </div>
            </div>
        </div>
        <div class="row" ng-repeat="device in airDevices track by $index">
            <div class="col-sm-12 device-item-container">
                <div class="device-item background" style="margin-bottom: 0px;">
                    <div  ng-long-press="onLongPress" ng-long-press-index="{{$index}}" class="device-item-alias air-purifier-title">
                        <span class="item-font">{{device.nick_name}}<span class="tlr-unit"> (μg/m3)</span></span><br>
                        <span class="item-font item-small-font">长按3秒修改</span>
                    </div>
                    <div ng-click="deviceClick(device.device_id, $index);" 
                         class="device-item-txt" 
                         style="padding-top:0px;text-align:center; margin-left:0;margin-bottom:0px;">
                        <div style="max-height:55px;min-width:122px;display:inline-block;float:top;border-bottom: 3px solid {{getColorOfPM25(airPurifierCtrl[device.device_id].pm25)}};">
                            <div style="float:left;display:block;padding-top:2px;">
                                <span class="device-item-value ng-binding">{{airPurifierCtrl[device.device_id].pm25}}</span>
                            </div>
                            <div style="float:right;display:block;margin-top:32px;padding-left:8px;">
                                <span class="device-item-label">PM2.5</span>
                            </div>
                        </div>
                    </div>
                    <div ng-click="deviceClick(device.device_id, $index);" 
                         class="device-item-txt"
                         style="padding-top:0px;text-align:center; margin-left:0;margin-top:0px;">
                        <div style="max-height:55px;min-width:122px;display:inline-block;float:top;border-bottom: 3px solid {{getColorOfTVOC(airPurifierCtrl[device.device_id].tvoc)}};">
                            <div style="float:left;display:block;padding-top:2px;">
                                <span class="device-item-value ng-binding">{{airPurifierCtrl[device.device_id].tvoc}}</span>
                            </div>
                            <div style="float:right;display:block;margin-top:32px;padding-left:8px;">
                                <span class="device-item-label">TVOC</span>
                            </div>
                        </div>
                    </div>
                    <div class="device-item" id="air-purifier-menu-id-{{$index}}" style="display: none;border-top:1px solid #C2C0C0;">
                        <div class="row">
                            <div class="col-xs-6 device-menu-item" 
                                 style="padding-left:30px;padding-right:20px;border-right: 1px solid #C2C0C0;">
                                <div class="item-txt" ng-click="onPurifierCtrl(device.device_id, 'switch', airPurifierCtrl[device.device_id].switchOn)">
                                    <div style="margin-top:0px;border-bottom: 1px solid #C2C0C0;">
                                        <img ng-if="airPurifierCtrl[device.device_id].switchOn === 1" class="air-btn" src="app/images/purifier/switch-1.png"></img>
                                        <img ng-if="airPurifierCtrl[device.device_id].switchOn === 0" class="air-btn" src="app/images/purifier/switch-0.png"></img>
                                        <div style="padding-top:6px;padding-bottom:8px;">开关</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6 device-menu-item" style="padding-right:30px">
                                <div class="item-txt" ng-click="onPurifierCtrl(device.device_id, 'mode', airPurifierCtrl[device.device_id].mode)">
                                    <div style="margin-top:0px;border-bottom: 1px solid #C2C0C0;">
                                        <img ng-if="airPurifierCtrl[device.device_id].windSpeed > 0 || airPurifierCtrl[device.device_id].switchOn === 0" class="air-btn" src="app/images/purifier/mode-2.png"></img>
                                        <img ng-if="airPurifierCtrl[device.device_id].windSpeed === 0 && airPurifierCtrl[device.device_id].mode === 0 && airPurifierCtrl[device.device_id].switchOn === 1" class="air-btn" src="app/images/purifier/mode-0.png"></img>
                                        <img ng-if="airPurifierCtrl[device.device_id].windSpeed === 0 && airPurifierCtrl[device.device_id].mode === 1 && airPurifierCtrl[device.device_id].switchOn === 1" class="air-btn" src="app/images/purifier/mode-1.png"></img>
                                        <div style="padding-top:6px;padding-bottom:8px;">模式</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 device-menu-item air-purifier-menu-item">
                                <div class="item-txt" ng-click="onPurifierCtrl(device.device_id, 'wind', airPurifierCtrl[device.device_id].windSpeed)">
                                    <div class="air-purifier" style="margin-top:0px;border-bottom: 1px solid #C2C0C0;">
                                        <img ng-if="airPurifierCtrl[device.device_id].windSpeed === 0 || airPurifierCtrl[device.device_id].switchOn === 0" class="air-btn" src="app/images/purifier/wind-0.png"></img>
                                        <img ng-if="airPurifierCtrl[device.device_id].windSpeed === 1 && airPurifierCtrl[device.device_id].switchOn === 1" class="air-btn" src="app/images/purifier/wind-1.png"></img>
                                        <img ng-if="airPurifierCtrl[device.device_id].windSpeed === 2 && airPurifierCtrl[device.device_id].switchOn === 1" class="air-btn" src="app/images/purifier/wind-2.png"></img>
                                        <img ng-if="airPurifierCtrl[device.device_id].windSpeed === 3 && airPurifierCtrl[device.device_id].switchOn === 1" class="air-btn" src="app/images/purifier/wind-3.png"></img>
                                        <img ng-if="airPurifierCtrl[device.device_id].windSpeed === 4 && airPurifierCtrl[device.device_id].switchOn === 1" class="air-btn" src="app/images/purifier/wind-4.png"></img>
                                        <img ng-if="airPurifierCtrl[device.device_id].windSpeed === 5 && airPurifierCtrl[device.device_id].switchOn === 1" class="air-btn" src="app/images/purifier/wind-5.png"></img>
                                        <div style="padding-top:6px;padding-bottom:8px;">风量</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6 device-menu-item" style="padding-right:30px">
                                <a href="#/air-percolator?mac={{device.device_id}}">
                                    <div class="item-txt">
                                        <div style="margin-top:0px;border-bottom: 1px solid #C2C0C0;">
                                            <img ng-if="airPurifierCtrl[device.device_id].percolatorClear === 1 && airPurifierCtrl[device.device_id].switchOn === 1" class="air-btn" src="app/images/purifier/net-1.png"></img>
                                            <img ng-if="airPurifierCtrl[device.device_id].percolatorClear !== 1 || airPurifierCtrl[device.device_id].switchOn === 0"class="air-btn" src="app/images/purifier/net-0.png"></img>
                                            <div style="padding-top:6px;padding-bottom:8px;">滤网</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 device-menu-item" style="padding-left:30px;padding-right:20px;border-right: 1px solid #C2C0C0;">
                                <div class="item-txt" ng-click="onPurifierCtrl(device.device_id, 'ion', airPurifierCtrl[device.device_id].ionEnabled)">
                                    <div style="margin-top:0px;">
                                        <img ng-if="airPurifierCtrl[device.device_id].ionEnabled === 1 && airPurifierCtrl[device.device_id].switchOn === 1" class="air-btn" src="app/images/purifier/ion-1.png"></img>
                                        <img ng-if="airPurifierCtrl[device.device_id].ionEnabled === 0 || airPurifierCtrl[device.device_id].switchOn === 0" class="air-btn" src="app/images/purifier/ion-0.png"></img>
                                        <div style="padding-top:6px;padding-bottom:8px;">负离子</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6 device-menu-item" style="padding-right:30px">
                                <div class="item-txt" ng-click="onPurifierCtrl(device.device_id, 'wifi')">
                                    <div style="margin-top:0px;">
                                        <img class="air-btn" src="app/images/purifier/wifi-1.png"></img>
                                        <div style="padding-top:6px;padding-bottom:8px;">WIFI</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
    </div>
</div>
